<template>
	<div v-if="this.$store.state.isFirstPage" :style="{borderTop:'1px solid '+tabBar.borderStyle}" id="footer" class="footer">
		<router-link v-for="(item,index) in tabBar.list" :key="item.pagePath" class="nav-li-div" :to="item.pagePath">
			<img v-if="currentRouter == item.pagePath" :src="item.selectedIconPath" />
			<img v-else :src="item.iconPath" />
		</router-link>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions } from 'vuex';
	export default {
		props: {
			
		},
		data() {
			return {
				currentRouter: "/index",
			}
		},
		computed: {
			...mapState([
				'tabBar'
			])
		},
		mounted() {
		},
		watch: {  
			$route(to, from) {
				var path = to.path;
				var firstRouter = '/' + path.substr(1).split('/')[0]
				this.setCurrentRouter(firstRouter)  
			}
		},
		created() {
			var currentRouter = this.$route.path;
			this.setCurrentRouter(currentRouter)
		},
		methods: {
			// 因底部tab栏 pagePath 设置的是一级路由 因此当前路由 需获取 一级路由名字进行设置
			setCurrentRouter(path){
				var firstRouter = '/' + path.substr(1).split('/')[0]
				this.currentRouter = firstRouter
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.footer {
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 100px;
	z-index: 3000;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #FFFFFF;
	box-sizing: border-box;
}
</style>